<%@ page session="false" contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <f:view>        
            <f:verbatim><h2></f:verbatim>
            <h:outputText value="Hello #{helloWorldBacking.name}. We hope you enjoy Apache MyFaces"/>
            <f:verbatim></h2></f:verbatim>

            <h:form id="form2">
              <h:commandLink id="link1" action="back">
                <h:outputText id="linkText" value="GO HOME"/>
              </h:commandLink>
            </h:form>
              <h:panelGroup id="body">
    
        <t:dataTable id="data"
                styleClass="scrollerTable"
                headerClass="standardTable_Header"
                footerClass="standardTable_Header"
                rowClasses="standardTable_Row1,standardTable_Row2"
                columnClasses="standardTable_Column,standardTable_ColumnCentered,standardTable_Column"
                var="choto"
                value="#{scrollerList.list}"
                preserveDataModel="false"
                rows="#{scrollerList.rowCount}"
           >
          <h:column>
	           <f:facet name="header">
	              <h:outputText value="NOMBRE" />
	           </f:facet>
	           <h:outputText value="#{choto.nombre}" />
	       </h:column>
		   <h:column>
	           <f:facet name="header">
	              <h:outputText value="LARGO" />
	           </f:facet>
	           <h:outputText value="#{choto.largo}" />
	       </h:column>

        </t:dataTable>

        <h:panelGrid columns="1" styleClass="scrollerTable2" columnClasses="standardTable_ColumnCentered" >
            <t:dataScroller id="scroll_1"
                    for="data"
                    fastStep="10"
                    pageCountVar="pageCount"
                    pageIndexVar="pageIndex"
                    styleClass="scroller"
                    paginator="true"
                    paginatorMaxPages="9"
                    paginatorTableClass="paginator"
                    paginatorActiveColumnStyle="font-weight:bold;"
                    immediate="true"
                    actionListener="#{scrollerList.scrollerAction}"
                    >
                <f:facet name="first" >
                    <t:graphicImage url="images/arrow-first.gif" border="1" />
                </f:facet>
                <f:facet name="last">
                    <t:graphicImage url="images/arrow-last.gif" border="1" />
                </f:facet>
                <f:facet name="previous">
                    <t:graphicImage url="images/arrow-previous.gif" border="1" />
                </f:facet>
                <f:facet name="next">
                    <t:graphicImage url="images/arrow-next.gif" border="1" />
                </f:facet>
                <f:facet name="fastforward">
                    <t:graphicImage url="images/arrow-ff.gif" border="1" />
                </f:facet>
                <f:facet name="fastrewind">
                    <t:graphicImage url="images/arrow-fr.gif" border="1" />
                </f:facet>
            </t:dataScroller>
            <t:dataScroller id="scroll_2"
                    for="data"
                    rowsCountVar="rowsCount"
                    displayedRowsCountVar="displayedRowsCountVar"
                    firstRowIndexVar="firstRowIndex"
                    lastRowIndexVar="lastRowIndex"
                    pageCountVar="pageCount"
                    immediate="true"
                    pageIndexVar="pageIndex"
                    >
                <h:outputFormat value="#{example_messages['dataScroller_pages']}" styleClass="standard" >
                    <f:param value="#{rowsCount}" />
                    <f:param value="#{displayedRowsCountVar}" />
                    <f:param value="#{firstRowIndex}" />
                    <f:param value="#{lastRowIndex}" />
                    <f:param value="#{pageIndex}" />
                    <f:param value="#{pageCount}" />
                </h:outputFormat>
            </t:dataScroller>
        </h:panelGrid>

    </h:panelGroup>
    
             
        </f:view>
    </body>
</html>